<template>
	<z-paging :refresher-enabled="false" :show-loading-more-when-reload="true" loading-more-default-text=""
		loading-more-loading-text="" loading-more-fail-text="" :empty-view-text="t('common.noData')"
		:show-loading-more-no-more-view="false" ref="paging" v-model="dataList" @query="queryList"
		class="max-w-[750px]">
		<h-dark :title="t('robot.recordTitle')"></h-dark>
		<block v-for="item in dataList">
			<view class="bg-white mt-[15px] px-[30rpx] py-[30rpx] mx-[24rpx] rounded-lg">
				<view class="flex justify-between items-center">
					<view class="flex justify-start items-center">
						<view class="mr-[15rpx]">
							<u-image width="60rpx" height="60rpx" :src="item.coin_logo"></u-image>
						</view>
						<view class="font-bold">
							{{item.coin_name}}
						</view>
					</view>
					<view class="text-muted">
						{{item.create_time}}
					</view>
				</view>
				<u-line class="text-info" margin="20rpx 0 20rpx 0" border-style="dashed" />
				<view class="">
					<view class="flex justify-around items-center mb-[20rpx]">
						<view class="text-center w-1/3">
							<view class="text-muted mb-[10rpx]">
								{{t('robot.recordMoney')}}
							</view>
							<view class="font-bold">
								{{item.money}}
							</view>
						</view>
						<view class="text-center w-1/3">
							<view class="text-muted mb-[10rpx] ">
								{{t('robot.recordIncome')}}
							</view>
							<view class="font-bold text-[#0065C8]">
								{{item.income}}
							</view>

						</view>
						<view class="text-center w-1/3">
							<view class="text-muted mb-[10rpx]">
								{{t('robot.recordBuyName')}}
							</view>
							<view class="font-bold">
								{{item.coin_buy_name}}
							</view>

						</view>
					</view>
					<view class="flex justify-around items-center mb-[20rpx]">
						<view class="text-center w-1/3">
							<view class="text-muted mb-[10rpx]">
								{{t('robot.recordSaleName')}}
							</view>
							<view class="font-bold">
								{{item.coin_sale_name}}
							</view>
						</view>
						<view class="text-center w-1/3">
							<view class="text-muted mb-[10rpx]">
								{{t('robot.recordBuyMoney')}}
							</view>
							<view class="font-bold">
								{{item.money_buy}} {{item.coin_symbol}}
							</view>

						</view>
						<view class="text-center w-1/3">
							<view class="text-muted mb-[10rpx]">
								{{t('robot.recordSaleMoney')}}
							</view>
							<view class="font-bold">
								{{item.money_sale}} {{item.coin_symbol}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</block>
	</z-paging>
</template>

<script lang="ts" setup>
	import { ref, shallowRef } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { recordLists } from '@/api/robot'
	import { getCurrency, formatDate, formatMoney } from '@/utils/util'
	import { t } from '@/utils/util'
	uni.setNavigationBarTitle({ title: t('robot.recordTitle') })

	const paging = shallowRef()
	const dataList = ref<any[]>([])
	const status = ref(0)
	const queryList = async (pageNo : number, pageSize : number) => {
		try {
			const data = await recordLists({
				page_no: pageNo,
				page_size: pageSize,
				status: status.value,
				date: formatDate(Math.round(Date.now() / 1000))
			})

			Object.keys(data.lists).forEach(key => {
				data.lists[key]['income'] = getCurrency() + formatMoney(data.lists[key]['income'] ? data.lists[key]['income'] : 0)
				data.lists[key]['money'] = getCurrency() + formatMoney(data.lists[key]['money'] ? data.lists[key]['money'] : 0)
			})
			paging.value.complete(data.lists)
		} catch (error) {
			paging.value.complete(false)
		}
	}
	onLoad((options : any) => {
		if (options.status) status.value = options.status
	})
</script>

<style lang="scss">
</style>